<template>
	<view style="padding-left: 32rpx;">
	  <block v-for="(item,index) in items">
	    <view class="tree-item" >
	      <view class="tree-item-title" @click="handleSelect(item)">{{item.label}}</view>
	      <view class="tree-item-icon" @click="handleOpen(item)" v-if="item.children != null && item.children.length > 0">
	        <image :src="item.open == true ? '../../static/img/arrow_up.png' : '../../static/img/arrow_down.png'" style="width: 44rpx; height: 88rpx" mode='aspectFit' ></image>
	      </view>
	    </view>
	
	    <view class="tree-line"></view>
	    <hb-tree :itemList="item.children" v-if="item.children != null && item.children.length > 0 && item.open == true" @select="handleTreeSelect"></hb-tree>
	    
	  </block>
	</view>

</template>

<script>

	export default {
		name: 'HbTree',
		props: {
			itemList: Array
		},
		data() {
			return {
				items: [],
			}
		},
		watch: {
			itemList(val) {
				this.items = Object.assign([], val)
			}
		},
		created() {
			this.items = Object.assign([], this.itemList)
		},
		methods: {
			//----------------------------事件--------------------------------
			handleOpen(item) {
			  this.items.forEach(el => {
				  if (el.value == item.value) {
					  this.$set(el,  'open', el.open == true ? false : true)
				  }
			  })
			},
		
			handleSelect(item) {
			  this.$emit('select', item)
			},
		
			handleTreeSelect(item) {
			  this.$emit('select', item)
			}  
		}
	}
</script>

<style>
	
.tree-item {
  height: 88rpx;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-right: 32rpx;
}

.tree-item-title {
	flex: 1;
}

.tree-item-icon {
	width: 100rpx; 
	height: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tree-line {
  height: 1px;
  background: #F7F7F7;
}

</style>
